<template>
  <div class="comment-head">
    <span
      v-for="(item, index) in projectType"
      :class="projectActive == index ? 'active' : ''"
      :key="item"
      @click="onProject(index, item.value)"
      >{{ item.name }}</span
    >
  </div>
  <div class="comment-list">
    <template v-for="item in list" :key="item.id">
      <div class="comment">
        <p>{{ item.liuyanneirong }}</p>
        <p>{{ item.createTime }}</p>
        <p class="project" v-if="item.pinglunleixing">
          <span>{{ item.pinglunleixing.value }}：</span
          >{{ item.pinglunshuju }}
        </p>
      </div>
    </template>
  </div>
  <h-page
    v-if="total"
    v-model:curr-page="params.current"
    :size="params.size"
    :total="total"
    @change="GetList"
  />
</template>
<script setup>
import { ref, defineProps } from "vue";
import { GetCommentInfo } from "@/api/user";
const props = defineProps({
  yhNo: {
    type: String,
    default: "",
  },
});
const params = ref({
  yhNo: props.yhNo,
  pinglunleixing: "XM",
  current: 1,
  size: 10,
});
// 用户
const projectActive = ref(0);
const projectType = [
  { name: "项目评论", value: "XM" },
  { name: "商品评论", value: "CP" },
  { name: "品牌评论", value: "PP" },
];
const list = ref([]);
const total = ref(0);
const onProject = (index, value) => {
  projectActive.value = index;
  params.value.pinglunleixing = value;
  GetList();
};
// 评论信息
const GetList = () => {
  GetCommentInfo(params.value).then((res) => {
    if (res.code == 4201) {
      list.value = res.data.records;
      total.value = res.data.total;
    }
  });
};
GetList();
</script>
<style scope lang="scss">
.comment-head {
  margin-top: 20px;
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    &:not(:first-child) {
      margin-left: 40px;
    }
    &.active {
      color: skyblue;
    }
  }
}
.comment-list {
  .comment {
    padding: 30px 20px;
    border-bottom: 1px solid #f2f2f2;
    p {
      color: #333;
      &:not(:first-child) {
        margin-top: 20px;
      }
    }
    .project {
      color: #1990FF;
      span {
        color: #333;
      }
    }
  }
}
</style>
